<template>
  <!--增值服务-线上支付-->
  <div class="online-payment-wrapper">
    <header class="payment-header">
      <h3 class="payment-title">增值服务 - 线上支付</h3>
      <router-link to="/valueAdded/downloadQr" target="_blank" class="download-qr">
        <img src="../../assets/img/ic_subscribe_qrcode.svg" alt class="img-qr" />
        <h4 class="download-txt">二维码下载</h4>
      </router-link>
      <i class="return-icon" @click="returnBack"></i>
    </header>
    <section class="payment-search-box">
      <el-input
        v-model="query_parkName"
        class="payment-search-input"
        size="small"
        placeholder="请输入停车场名称"
        @keyup.enter.native="searchParkingsLot"
      >
        <!-- <template slot="prepend">停车场</template> -->
        <el-button slot="append" icon="el-icon-search" @click="searchParkingsLot"></el-button>
      </el-input>
    </section>
    <div class="payment-body-box">
      <section
        class="parking-card-box"
        v-for="(item, index) in allParkList"
        :key="index"
        v-if="item.isShow"
      >
        <header class="card-header">
          <img src="../../assets/img/ic_parkinglot.svg" alt class="img-parkinglot" />
          <h4 class="parkinglot-name">{{ item.parkName }}</h4>
        </header>
        <section class="card-info-body">
          <header class="tab-header">
            <!-- <a class="tab-item WEIXIN">微信支付（包含无感）</a>
            <a class="tab-item ALIPAY">支付宝支付（包含无感）</a>-->
            <a
              class="tab-item"
              v-for="(typeName, key) in payTypeList"
              :key="key + index"
              :class="[key, { active: key === item.active }]"
              @click.prevent="switchPayType(key, item)"
            >{{ typeName }}</a>
          </header>

          <!-- 未开通 -->
          <!-- <div class="card-info-box not-open">
            <el-button class="open-btn" type="primary" size="mini" v-if="item.active === 'WEIXIN'">申请开通-微信支付</el-button>
            <el-button class="open-btn" type="primary" size="mini" v-else-if="item.active === 'ALIPAY'">申请开通-支付宝支付</el-button>
          </div>-->

          <keep-alive>
            <component
              :is="item.componentName"
              :active="item.active"
              :parkId="item.parkId"
              :info="item.processInfo[item.active]"
              :weixin-mch-id="item.weixinMchId"
              :ref="item.parkId"
              @getMerchant="getMerchant"
            ></component>
          </keep-alive>
        </section>
      </section>
    </div>

    <div class="static-wrapper invoice-wrapper">
      <!-- <section class="static-status-info">
        <div class="status-info-box">
          <div class="info-list">
            <h3 class="status-icon success" v-if="allParkList && allParkList.length > 0">
              <i class="el-icon-success s-icon"></i>
              <span>已开通</span>
            </h3>
            <h3 class="status-icon info" v-else>
              <i class="el-icon-warning s-icon"></i>
              <span>未开通</span>
            </h3>
            <span class="info-list-item" v-if="allParkList && allParkList.length > 0">（已开通车场：万科停车场 / 金御华府停车场 / 金色领域停车场）</span>
          </div>
          <p class="info-list-item">申请须知：1.开通资料  &nbsp;2.填写公司提供的申请资料的格式  &nbsp;3.把资料以邮件的形式发送到：www.123@qq.com</p>
        </div>
        <el-button type="primary" size="medium">下载邮件模板</el-button>
      </section>-->

      <section class="static-note-wrapper" v-show="isLoaded">
        <div class="note-group">
          <h4 class="note-title">简介</h4>
          <p class="note-info">开通后可使用微信、支付宝、微信无感、支付宝无感等线上支付功能。</p>
        </div>
        <div class="note-group">
          <h4 class="note-title">服务截图</h4>
          <div class="note-group-wrapper">
            <div class="note-img-group">
              <h4 class="group-title">微信支付截图</h4>
              <div class="note-img-box">
                <img src="../../assets/img/img/payment1.png" alt class="img w420" />
              </div>
            </div>
            <div class="note-img-group mr0">
              <h4 class="group-title">支付宝支付截图</h4>
              <div class="note-img-box">
                <img src="../../assets/img/img/payment2.png" alt class="img w420" />
              </div>
            </div>
            <div class="note-img-group mr0">
              <h4 class="group-title">支付宝无感支付开通流程</h4>
              <div class="note-img-box">
                <img src="../../assets/img/img/payment3.png" alt class="img big-img" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <el-dialog
      title="选择账号"
      :visible.sync="dialogVisible"
      width="580px"
      class="zb-dialog choose-main-body-dialog"
    >
      <div class="dialog-content">
        <p class="empty-tips" v-if="!merchantList.length">暂无商户,请新建商户</p>
        <div class="signed-park-list" v-if="merchantList.length">
          <el-button
            type="success"
            plain
            class="signed-park-item"
            v-for="(item, index) in merchantList"
            :key="item.id"
            @click="changeParkPayMerchantAccount(item)"
          >{{ item.merchantShort }}</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" plain @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="medium" @click="createNew">新建商户</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/mixins/utils.js";
export default {
  name: "onlinePayment",
  mixins: [utils],
  data() {
    return {
      dialogVisible: false,
      merchantList: [],
      createNewParams: null,
      query_parkName: "",
      payTypeList: {
        WEIXIN: "微信支付（包含无感）",
        ALIPAY: "支付宝支付（包含无感）"
      },
      allParkList: [],
      isLoaded: false,
      qrCodeTimer:''
    };
  },

  mounted() {
    this.getList();
    let _this = this;
    //创建并执行更新二维码状态定时器
    this.qrCodeTimer = setInterval(() => {
      _this.getOpenAlipayStatusVoList()
    }, 3000);
  },

  methods: {
    getMerchant(item) {
      this.createNewParams = item;
      this.createNew();
      return;
      API.fetchGet("/valueAdded/getPaymentMerchantConfigList.do").then(res => {
        this.merchantList = res.data;
        if (!this.merchantList.length) {
          this.createNew();
          return;
        }
        this.dialogVisible = true;
      });
    },
    createNew() {
      if (this.createNewParams.payPlatform === "WEIXIN") {
        this.$router.push({
          path: "/valueAdded/applyLittleCustom",
          query: this.createNewParams
        });
      }

      if (this.createNewParams.payPlatform === "ALIPAY") {
        this.$router.push({
          path: "/valueAdded/savePayMerchantInfo",
          query: this.createNewParams
        });
      }
    },
    changeParkPayMerchantAccount(curItem) {
      this.$confirm(
        `您是否确定使用商户账号“${curItem.merchantShort}”为本停车场申请开通${
          this.createNewParams.payPlatform === "WEIXIN" ? "微信" : "支付宝"
        }支付?`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "mgr-msg-box",
          confirmButtonClass: "el-button el-button--danger"
        }
      ).then(() => {
        this.dialogVisible = false;
        API.fetchPost("/valueAdded/changeParkPayMerchantAccount", {
          merchantId: curItem.id,
          parkId: this.createNewParams.parkId,
          payPlatform: this.createNewParams.payPlatform
        })
          .then(res => {
            this.showToast("申请成功", 1, 2000);
            this.getList();
          })
          .catch(() => {
            this.dialogVisible = true;
          });
      });
    },
    getList() {
      let self = this;
      let params = {
        operatorId: sessionStorage.getItem("_operatorID")
      };
      API.fetchGet("/valueAdded/getParkPayModeOpenPrcessInfo", params).then(
        data => {
          let _data = JSON.parse(JSON.stringify(data));
          console.log('getParkPayModeOpenPrcessInfo',data)
          _data.forEach(item => {
            item.active = "WEIXIN";
            let _info = item.processInfo[item.active];
            let _status = _info && _info.status ? _info.status : "";
            item.componentName = self.getCompName(_status);
            item.isShow = true;
          });
          self.isLoaded = true;
          self.allParkList = _data;
          self.getOpenAlipayStatusVoList();
          self.searchParkingsLot();
        },
        err => {
          this.allParkList = [];
        }
      );
    },

    //获取列表中支付宝是否扫码的状态，挂载进更新组件所有数据（所有数据）
    getOpenAlipayStatusVoList(){
      let self = this;
      let params = []
      this.allParkList.forEach(item => {
        params.push(item.parkId)
      })
      API.fetchPost('/valueAdded/getOpenAlipayStatusVoList',params).then(
        data => {
          if(data){
            let _data = JSON.parse(JSON.stringify(data));
            let allCodeStatus = _data
            // console.log('getOpenAlipayStatusVoList',_data)
            self.allParkList.forEach(function(item,index){
              if(item.processInfo.ALIPAY){
                if(item.processInfo.ALIPAY.status == "SUCCESS"){
                  item.processInfo.ALIPAY["showOpenStatus"] = allCodeStatus[index]
                }
              }
            })
          }
        },
        err =>{
          
        }
      )
    },

    // 搜索停车场名称
    searchParkingsLot() {
      if (!this.query_parkName) {
        this.allParkList.forEach(item => {
          item.isShow = true;
        });
        return;
      }
      let _query_parkName = this.query_parkName;
      this.allParkList.forEach(item => {
        let name = item.parkName;
        if (name.indexOf(_query_parkName) > -1) {
          item.isShow = true;
        } else {
          item.isShow = false;
        }
      });
    },

    switchPayType(payType, item) {
      if (item.active !== payType) {
        let _info = item.processInfo[payType];
        let _status = _info && _info.status ? _info.status : "";
        item.componentName = this.getCompName(_status);
        item.active = payType;
      }
    },

    getCompName(status) {
      let name = status ? status.toLowerCase() : "default";
      return name + "-process-comp";
    },

    downloadQR() {
      this.$router.push({
        path: "/onlinePayment/downloadingQr"
      });
    },

    returnBack() {
      this.$router.go(-1);
    }
  },

  beforeDestroy() {
    //清除定时器
    clearInterval(this.qrCodeTimer);
  },

  components: {
    "default-process-comp": {
      props: {
        active: String,
        parkId: Number
      },
      template: `
        <div class="card-info-box not-open">
          <a href="javascript:;" class="el-button open-btn el-button--success el-button--mini" v-if="active === 'WEIXIN'" @click="$emit('getMerchant', {
            parkId: parkId, payPlatform: 'WEIXIN'
          })">申请开通-微信支付</a>

           <a href="javascript:;" class="el-button open-btn el-button--primary el-button--mini" v-if="active === 'ALIPAY'" @click="$emit('getMerchant', {
            parkId: parkId, payPlatform: 'ALIPAY'
          })">申请开通-支付宝支付</a>


          <!-- <router-link :to="{path: '/valueAdded/applyLittleCustom', query: { parkId: parkId, payPlatform: 'WEIXIN' }}" class="el-button open-btn el-button--primary el-button--mini" v-if="active === 'WEIXIN'" target="_blank">申请开通-微信支付</router-link> -->
          <!-- <router-link :to="{path: '/valueAdded/savePayMerchantInfo', query: { parkId: parkId, payPlatform: 'ALIPAY' }}" class="el-button open-btn el-button--primary el-button--mini" v-if="active === 'ALIPAY'" target="_blank">申请开通-支付宝支付</router-link> -->
        </div>
      `
    },

    "auditing-process-comp": {
      props: {
        active: String,
        info: Object
      },
      data() {
        return {
          parse_remark: null
        };
      },
      template: `
         <div class="card-info-box auditing" v-if="isAuditingStep1">
          <div class="step-box">
            <a class="step-item">
              <i :class="{'step-icon':true,'finish':(active==='WEIXIN'),'finish2':(active==='ALIPAY')}"></i>
              <span class="step-txt">提交资料</span>
            </a>
            <a class="step-item">
              <i :class="{'step-icon':true,'process':(active==='WEIXIN'),'process2':(active==='ALIPAY')}"></i>
              <span class="step-txt">审核中（大约5个工作日）</span>
            </a>
            <a class="step-item">
              <i class="step-icon"></i>
              <span class="step-txt">开通成功</span>
            </a>
          </div>
          <div class="bottom-btn-group">
            <router-link v-if="active === 'WEIXIN'" :to="{path: '/valueAdded/applyLittleCustom', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active, isPreview: true }}" class="bottom-btn" target="_blank">查看账号资料</router-link>
            <router-link v-else-if="active === 'ALIPAY'" :to="{path: '/valueAdded/getParkPayMerchantInfo', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">查看账号资料</router-link>
          </div>
        </div>
        <div class="card-info-box auditing" v-else-if="isAuditingStep2">
          <div class="step-box">
            <a class="step-item">
              <i class="step-icon finish"></i>
              <span class="step-txt">提交资料</span>
            </a>
            <a class="step-item">
              <i class="step-icon process"></i>
              <span class="step-txt">审核中（大约5个工作日）</span>
            </a>
            <a class="step-item">
              <i class="step-icon"></i>
              <span class="step-txt">开通成功</span>
            </a>
          </div>
          <div class="qr-box">
            <img :src="parse_remark.sign_url" alt="">
            <p>由提交身份证所有者扫描二维码确认完成签约过程</p>
          </div>
        </div>

        <div class="card-info-box auditing" v-else-if="isAuditingStep3">
          <div class="step-box">
            <a class="step-item">
              <i class="step-icon finish"></i>
              <span class="step-txt">提交资料</span>
            </a>
            <a class="step-item">
              <i class="step-icon process"></i>
              <span class="step-txt">审核中（大约5个工作日）</span>
            </a>
            <a class="step-item">
              <i class="step-icon"></i>
              <span class="step-txt">开通成功</span>
            </a>
          </div>
          <div class="remit-money">
            <div class="remit-money-tips">
              请您联系公司财务在<span class="date" style="margin: 0 5px">{{ parse_remark.deadline_time }}</span>前按照以下信息进行汇款，否则将注册失败！
            </div>
            <div class="info-box">
              <ul>
                <li class="info-item">
                  <div class="name" style="padding-top: 5px;">汇款金额</div>
                  <div class="bd">
                    <div class="bd-item strong">¥ {{ parse_remark.pay_amount }}</div>
                    <div class="bd-item-tips">请汇入指定金额，非指定金额将注册失败</div>
                  </div>
                </li>
                <li class="info-item">
                  <div class="name" style="padding-top: 5px;">收款卡号</div>
                  <div class="bd">
                    <div class="bd-item strong">{{ parse_remark.destination_account_number }}</div>
                    <div class="bd-item-tips">每个注册账号对应的收款卡号不同，请勿重复打款</div>
                  </div>
                </li>
                <li class="info-item">
                  <div class="name">收款户名</div>
                  <div class="bd">
                    <div class="bd-item">{{ parse_remark.destination_account_name }}</div>
                  </div>
                </li>
                <li class="info-item">
                  <div class="name">开户银行</div>
                  <div class="bd">
                    <div class="bd-item">{{ parse_remark.destination_account_bank }}</div>
                  </div>
                </li>
                <li class="info-item">
                  <div class="name">备注信息</div>
                  <div class="bd">
                    <div class="bd-item">{{ parse_remark.remark }}</div>
                  </div>
                </li>
              </ul>
            </div>

             <div class="info-box">
               <div class="info-box-tips">
                 请使用与主体一致的对公账号汇款
               </div>
              <ul>
                <li class="info-item">
                  <div class="name">付款户名</div>
                  <div class="bd">
                    <div class="bd-item">{{ parse_remark.account_name }}</div>
                  </div>
                </li>
              </ul>
            </div>

          </div>
        </div>

      `,
      created() {
        if (this.info && this.info.remark) {
          this.parse_remark = JSON.parse(this.info.remark);
        }
      },
      computed: {
        isAuditingStep1() {
          return (
            this.info && (this.info.remark === null || this.info.remark === "")
          );
        },
        isAuditingStep2() {
          return this.parse_remark && !!this.parse_remark.sign_url;
        },
        isAuditingStep3() {
          return (
            this.parse_remark && !!this.parse_remark.destination_account_bank
          );
        }
      }
    },

    "success-process-comp": {
      data() {
        return {
          succssImg: require('../../assets/img/ic_open_success.svg'),
          pidtipImg: require('../../assets/img/pid-tip.jpg'),
          isAuditingOK: this.info.showOpenStatus?this.info.showOpenStatus.needShowOpen:false,//默认未授权，显示授权流程，支付宝扫码成功后才算开通成功
          ruleForm:{
            mchId: ''
          },
          rules: {
            mchId: [{ required: true, message: '请输入PID', trigger: 'change' }]
          },
          parse_remark: null,
          mchId:this.info.merchantId,
          pId:this.info.parkId,

          PIDtipVisible:false,//pid-tip提示显示
          alipayStatus:null,//
          isPidShow:false,//默认false
          isQrShow:true,//默认false
          qrUrl:'',
          qrName:'',
          mchIdinput:'',//用户输入的mchId
          pidStatusTimer:[]
        };
      },
      created() {
        if(this.active == 'ALIPAY'&&this.info.status == 'SUCCESS'){
          var _self = this
          this.getPidStatus(this.mchId,this.pId)
        }
      },
      mounted(){
        var self = this
      },
      methods: {
        //提交表单
        submitForm(formName) {
          let self = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log('PID submit!');
              self.updateAlipayPidInfo()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        //处理账户名字（打星号）
        qrNameHandler(name) {
          if(name){
            let reg = /^(.).+(.)$/g;
            let str = name;
            return (str.replace(reg, "$1*****$2"));
          }
        },
        //PID弹窗
        handlePIDClose(done) {
          let self = this
          self.PIDtipVisible =! self.PIDtipVisible
        },
        //获取当前pid或者二维码显示状态，支付宝开通(审核通过，等待用户授权或者填写PID再授权)成功时调用
        getPidStatus(mchId,pId){
          let _self = this
          let params = {
            merchantId:mchId,
            parkId:pId
          };
          API.fetchGet('/valueAdded/getQrCodeApplyForAlipay', params).then(
              data => {
                if(data){//为空则授权成功不展示二维码
                  let _data = JSON.parse(JSON.stringify(data));
                  _self.alipayStatus = _data
                  _self.isPidShow = _data.needInputPid
                  _self.isQrShow = _data.needOpen
                  _self.qrUrl = _data.qrValue || ''
                  _self.qrName = this.qrNameHandler(_data.qrAlipayName) || '（暂无）'
                  console.log('getPidStatus',data)
                }
              },
              err => {
                console.log(err)
              }
            );
        },
        //更新支付宝账号pid信息，1是成功，2是不成功
        updateAlipayPidInfo(){
          var self = this
          let params = {
            mchId: self.ruleForm.mchId,//用户输入的PID
            parkId: self.pId,
            payMentMerchantId: self.mchId
          }
            API.fetchPost('/valueAdded/updateParkAlipayPidInfo', params)
            .then(res => {
              self.getPidStatus(self.mchId,self.pId);
              self.showToast('提交成功', 1, 2000);
            })
            .catch(() => {
            });
        }
      },
      props: {
        info: Object,//当前一个车场下申请的微信或者支付宝数据
        active: String,//活动窗
        weixinMchId: String
      },
      template: `
        <div>
          <div class="card-info-box auditing check-ready" v-if="isAuditingOK && active == 'ALIPAY' ">
            <div class="step-box">
              <a class="step-item">
                <i class="step-icon finish2"></i>
                <span class="step-txt">提交资料</span>
              </a>
              <a class="step-item">
                <i class="step-icon process2 be-blue"></i>
                <span class="step-txt">审核中（大约5个工作日）</span>
              </a>
              <a class="step-item">
                <i class="step-icon"></i>
                <span class="step-txt">开通成功</span>
              </a>
            </div>
            <div v-if="active === 'ALIPAY'" class="pid-inputbox">
              <div v-if="isPidShow">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                  <el-form-item label="PID" prop="mchId" label-position="left">
                    <el-input v-model="ruleForm.mchId" placeholder="2088*********"></el-input>
                    <el-button type="primary" class="open-btn sub-btn" @click="submitForm('ruleForm')">提 交</el-button>
                  </el-form-item>
                </el-form>
                <p>请填写PID激活功能。<el-button type="text" @click="PIDtipVisible = true">什么是PID?</el-button></p>
                <el-dialog
                    title="什么是PID"
                    :visible.sync="PIDtipVisible"
                    width="720px"
                    :before-close="handlePIDClose">
                    <div class="weblink-to inside-tip tip-step">1、登录<a href="https://openhome.alipay.com/platform/keyManage.htm?keyType=partner" target="_blank">https://openhome.alipay.com/platform/keyManage.htm?keyType=partner</a>（需要登录）</div>
                    <div class="tip-step">2、“合作伙伴身份”就可以看到我们所需要查询的PID，以2088开头的16位纯数字</div>
                    <img :src="pidtipImg">
                </el-dialog>
              </div>
              <div v-if="isQrShow" class="qr-showbox">
                <!-- <img :src="qrUrl"> -->
                <qriously :value="qrUrl" :size="154.3"/>
                <p>请使用<span class="pixelate-code">{{qrName}}</span>支付宝扫码授权，<span class="red">授权后才能正常收款</span></p>
              </div>
            </div>
            <div class="bottom-btn-group">
              <router-link v-if="active === 'WEIXIN'" :to="{path: '/valueAdded/applyLittleCustom', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active, isPreview: true }}" class="bottom-btn" target="_blank">查看账号资料</router-link>
              <router-link v-else-if="active === 'ALIPAY' && !isQrShow" :to="{path: '/valueAdded/getParkPayMerchantInfo', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">查看账号资料</router-link>
            </div>
          </div>

          <div class="card-info-box open-success" v-if="!isAuditingOK || active === 'WEIXIN'">
            <div class="result-box">
              <img :src="succssImg" alt="">
              <a class="result-item">开通成功！</a>
            </div>
            <div class="bottom-btn-group">
            <router-link v-if="active === 'WEIXIN'" :to="{path: '/valueAdded/applyLittleCustom', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active, isPreview: true }}" class="bottom-btn" target="_blank">查看账号资料</router-link>
              <router-link v-else-if="active === 'ALIPAY'" :to="{path: '/valueAdded/getParkPayMerchantInfo', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">查看账号资料</router-link>


              <router-link :to="{path: '/valueAdded/changeParkPayMerchantAccount', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">更换账号</router-link>

              <router-link  v-if="active === 'WEIXIN' && this.weixinMchId" :to="{path: '/valueAdded/applyLittleCustom', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active, isUpgrade: true }}" class="bottom-btn" target="_blank">升级账号</router-link>
            </div>
          </div>
        </div>
      `
    },

    "fail-process-comp": {
      data() {
        return {
          failImg: require("../../assets/img/ic_warning.svg")
        };
      },
      props: {
        info: Object,
        active: String,
      },
      template: `
        <div class="card-info-box open-fail">
          <div class="result-box">
            <img :src="failImg" alt="">
            <a class="result-item">审核不通过！原因 {{info.remark}}</a>
          </div>
          <div class="bottom-btn-group">
            <router-link v-if="active === 'WEIXIN'" :to="{path: '/valueAdded/applyLittleCustom', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">修改账号资料</router-link>
            <router-link v-if="active === 'ALIPAY'" :to="{path: '/valueAdded/savePayMerchantInfo', query: { merchantId: info.merchantId, parkId: info.parkId, payPlatform: active }}" class="bottom-btn" target="_blank">修改账号资料</router-link>
          </div>
        </div>
      `
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/less/base/variables.less";
@import "./style/staticPage.less";

.signed-park-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  .signed-park-item {
    width: 320px;
    margin-left: 0px !important;
    margin-bottom: 20px;
  }
}

.online-payment-wrapper {
  min-height: 100%;
}
.payment-header {
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;

  .payment-title {
    display: inline-block;
    font-size: 16px;
    color: @black;
  }

  .download-qr {
    display: flex;
    align-items: center;
    color: @blue;
    font-size: 14px;
    margin-left: 45px;
    cursor: pointer;
  }

  .download-txt {
    display: inline-block;
    margin-left: 10px;
  }

  .return-icon {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url("../../assets/img/ic_form_back@2x.svg") no-repeat center
      center;
    margin-left: 30px;
    margin-bottom: 5px;
    cursor: pointer;
  }
}

.payment-search-box {
  padding: 20px 30px;

  .payment-search-input {
    width: 260px;
  }
}

.payment-body-box {
  display: flex;
  flex-flow: row wrap;
  padding: 0 10px 20px 20px;
  background-color: #fff;
}

.parking-card-box {
  width: calc(~"(100% - 60px) / 2");
  min-width: 480px;
  padding: 16px 20px 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  border: 2px solid @lightBorderColor;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;

  .img-parkinglot {
    display: inline-block;
    width: 22px;
    height: 22px;
  }

  .parkinglot-name {
    display: inline-block;
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
  }
}

.card-info-body {
  margin-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-item {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding-left: 18px;
  padding-right: 18px;
  color: @grey66;
  font-size: 14px;
  cursor: pointer;

  &.active {
    background-color: @greyF4;
    border-radius: 4px 4px 0 0;
  }
}

.card-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: @greyF4;
  border-radius: 4px;
  &.open-fail {
    height: 116px;
  }
  &.open-success {
    height: 116px;
  }
  &.auditing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &.check-ready{
      background: @greyF4;
    }
  }
}

.static-note-wrapper {
  .note-group:first-child {
    margin-top: 0;
    padding-top: 10px;
  }
}
</style>

<style lang="less">
@import "../../assets/less/base/variables.less";

.payment-search-input {
  .el-input-group__prepend,
  .el-input-group__append {
    padding-left: 10px;
    padding-right: 10px;
    border-color: @lightBorderColor;
    overflow: hidden;
  }

  .el-input__inner {
    box-shadow: none;
    border-color: @lightBorderColor;
    height: 34px;
    line-height: 34px;
    border-radius: 0;

    &:focus {
      box-shadow: none;
      border-color: @blue;
    }
  }
}

.card-info-box {
  a {
    color: @grey66;
  }

  &.not-open {
    min-height: 116px;
    justify-content: center;
  }

  .open-btn {
    width: 160px;
    color: #fff;
    margin-left: 20px;
  }

  .step-box {
    height: 82px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
  }

  .step-item {
    // flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 5px;
      height: 2px;
      background-color: @lightBorderColor;
    }

    &:first-child {
      &::after {
        left: calc(~"50% + 6px");
        right: 0;
      }
    }
    &:last-child {
      &::after {
        left: 0;
        right: calc(~"50% + 6px");
      }
    }

    &:not(:first-child):not(:last-child) {
      flex: 1;
      &::after {
        left: 0;
        right: 0;
      }
    }

    .step-icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: @greycc;
      border-radius: 50%;
      z-index: 10;

      &.finish {
        background-color: @lightGreen;
      }
      &.finish2 {
        background-color: @blue;
      }

      &.process {
        background-color: @lightGreen;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: -3px;
          top: -3px;
          right: -3px;
          bottom: -3px;
          background-color: rgba(111, 200, 13, 0.3);
          border-radius: 50%;
        }
      }
      &.process2 {
        background-color: @blue;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: -3px;
          top: -3px;
          right: -3px;
          bottom: -3px;
          background-color: rgba(89, 149, 206, 0.3);
          border-radius: 50%;
        }
      }
    }

    .step-txt {
      display: inline-block;
      margin-top: 13px;
      font-size: 12px;
      white-space: nowrap;
    }
  }

  .result-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;

    .result-item {
      margin-left: 10px;
    }
  }

  .bottom-btn-group {
    display: flex;
    justify-content: space-between;
  }

  .bottom-btn {
    flex: 1;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background-color: @grayE6;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;

    + .bottom-btn {
      margin-left: 2px;
    }
  }
}

.qr-box {
  height: 240px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  img {
    width: 180px;
  }
  p {
    font-size: 14px;
    color: #666666;
    text-align: center;
    margin-top: 10px;
  }
}

.card-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: @greyF4;
  border-radius: 4px;
  &.open-fail {
    height: 116px;
  }
  &.open-success {
    height: 116px;
  }
  &.auditing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &.check-ready{
      background: @greyF4;
    }
  }
}

//pid提示&qrshow
.qr-showbox{
  text-align: center;
  p{
    text-align: center;
    padding: 20px 0 25px 0;
    .red{
      color: red;
    }
  }
}
.pid-inputbox{
  p{
    text-align: center;
    margin-bottom: 8px;
  }
  .el-form{
    padding-left:30px;
    .el-form-item{
      margin-bottom: 8px;
      .el-form-item__label{
        padding: 0;
      }
      .el-form-item__content{
        .el-input{
          width: 320px;
          margin-left: 10px;
          >input{
            height: 34px;
          }
        }
      }
    }
    .open-btn{
      &.sub-btn{
        width: 80px;
        height: 34px;
        margin: 2px 0 0 10px;
        padding: 0
      }
    }
    .el-form-item__error{
      left: 44px
    }
  }
  .el-dialog{
        border-radius: 4px;
        .tip-step{
          margin-bottom: 30px;
        }
        .el-dialog__header{
            padding: 0;
            padding-left: 20px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            background: #F4F4F4;
            font-weight: bold;
            color: #383838;
            .el-dialog__title{
              font-size: 14px;
              line-height: 10px;
            }
        }
        .el-dialog__body{
          padding: 30px 50px;
          color: #474747;
          img{
            width: 620px;
            height: 255px;
          }
        }
        .el-dialog__headerbtn{
          top: 14px;
          .el-dialog__close{
            color: #555;
            font-weight: bold;
          }
        }
      }
}

.remit-money {
  padding: 0 28px 20px 28px;
  .remit-money-tips {
    font-size: 12px;
    color: #666666;
    padding-left: 28px;
    .date {
      color: #5995d8;
    }
    background: url("../../assets/img/ic_time.svg") no-repeat left top;
    background-size: 16px 16px;
  }
  .info-box {
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    margin-top: 10px;
    padding: 20px;
    .info-item {
      display: flex;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0px;
      }
      .name {
        width: 76px;
        font-size: 12px;
        color: #666666;
      }
      .bd {
        .bd-item {
          font-size: 12px;
          color: #333333;
          &.strong {
            font-size: 18px;
            color: #333333;
          }
        }
        .bd-item-tips {
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .info-box-tips {
      font-size: 12px;
      color: #999999;
      margin-bottom: 10px;
    }
  }
}
</style>
